<template>
  <div id="home">
    <div id="search">
      <i class="iconfont">&#xe63c;</i>
      <input type="text" placeholder="搜索" />
    </div>
    <Swiper :list="card" title="官方歌单" :change="false"></Swiper>
    <br />
    <Swiper :list="card1" title="达人歌单" :change="false"></Swiper>
    <br />
    <Swiper2 :list="card2"></Swiper2>
  </div>
</template>

<script>
import Swiper from "../components/Swiper";
import Swiper2 from "../components/Swiper2";
import axios from 'axios'
export default {
  components: {
    Swiper,
    Swiper2
  },
  data() {
    return {
      card:[],
      card1:[],
      card2:[]
    };
  },
  mounted(){
    axios.get('http://localhost:3000/getsongs')
    .then( res => {
      this.card = res.data.v_card
      this.card1 = res.data.v_card1
      this.card2 = res.data.v_card3
    })
  }
};
</script>

<style>
/* .swipeCard{
    display: flex;
    flex-direction: row;
}
  .item {
    height: 166px;
    width: 130px;
    margin-left: 5%;
    font-size: 15px;
  }

  a {
    text-decoration: none;
  }

  .item div {
    color: #000;
  } */
</style>